<template>
  <div class="node ">
    <!-- 开始流程 -->
    <div v-if="process.nodeType !== 'block'" class="node-wrap">
      <div class="node-wrap-box " :class="process.nodeType != 'start' ? 'hasNext' : ''">
        <div>
          <div
            class="title"
            :style="
              process.nodeType == 'start'
                ? 'background:rgb(87, 106, 149)'
                : process.nodeType == 'approver'
                ? 'background:rgb(255, 148, 62)'
                : 'background:rgb(50, 150, 250)'
            "
          >
            <span v-if="process.nodeType === 'start'" class="title-span" @click="editortitle">发起人</span>
            <span v-if="!isInput && process.nodeType !== 'start'" class="title-span" @click="editortitle">{{ process.name }}</span>
            <input
              v-if="isInput && process.nodeType !== 'start'"
              v-model="process.name"
              v-focus
              class="title-input"
              type="text"
              @blur.stop="changeName"
            />
            <a-icon v-if="process.nodeType !== 'start'" class="anticon " type="close" @click="delNode()" />
          </div>
          <div class="content" @click="openConfigDrawer(process)">
            <div v-if="process.nodeType == 'start'" class="text">
              {{ process.props ? process.props : "起始节点" }}
            </div>
            <div v-if="process.nodeType == 'approver'" class="text">
              <span class="placeholder">
                {{ process.props.name ? process.props.name : "审批人" }}
              </span>
            </div>
            <div v-if="process.nodeType == 'notifier'" class="text">
              <span class="placeholder">
                {{ process.props.name ? process.props.name : "抄送人" }}
              </span>
            </div>
            <a-icon class="arrow" type="right" />
          </div>
        </div>
      </div>
      <!-- 开始下面的 添加按钮 -->
      <NodeAdd :child-node.sync="process.childNode" :node-id="nodeId" @change="addNodeId" />
    </div>
    <!-- 条件节点 -->
    <!--  -->
    <div v-if="process.nodeType == 'block' && process.conditionNodes.length > 1" class="branch-wrap">
      <div class="branch-box-wrap">
        <div class="branch-box">
          <a-button size="small" class="add-branch " shape="round" @click="addTerm">添加条件</a-button>
          <div v-for="(item, index) in process.conditionNodes" :key="index" class="col-box">
            <div class="condition-node">
              <div class="condition-node-box">
                <div class="auto-judge">
                  <a-icon class="editor-close" type="close" @click.stop="delTerm(index)" />
                  <div class="title-wrapper">
                    <input v-model="item.name" class="editor-input" type="text" />
                    <span class="priority-title">优先级{{ index + 1 }}</span>
                  </div>
                  <div class="content" @click="openConfigDrawer(item)">
                    {{ item.operationName }}
                  </div>
                </div>
                <NodeAdd :child-node.sync="item.childNode" :node-id="nodeId" @change="addNodeId" />
              </div>
            </div>
            <!-- 递归自己掉自己 -->
            <NodeWrapper v-if="item.childNode && !item.isLastNode" :process.sync="item.childNode" :formlist="formlist" :node-id="nodeId" />
            <div v-if="index == 0" class="top-left-cover-line" />
            <div v-if="index == 0" class="bottom-left-cover-line" />
            <div v-if="index == process.conditionNodes.length - 1" class="top-right-cover-line" />
            <div v-if="index == process.conditionNodes.length - 1" class="bottom-right-cover-line" />
          </div>
        </div>
        <NodeAdd :child-node.sync="process.childNode" :node-id="nodeId" @change="addNodeId" />
      </div>
    </div>
    <StartDrawer :show.sync="showStart" :start-options="startOptions" @change="onValueChange" />
    <ApprovalDrawer :show.sync="showAppro" :appro-options="approOptions" @change="onValueChange" />
    <NotifierDrawer :show.sync="showNotif" :notif-options="notifOptions" @change="onValueChange" />
    <BlockDrawer
      v-model="process"
      :process="process"
      :formlist="formlist"
      :show.sync="showBlock"
      :block-options="blockOptions"
      @change="onValueChange"
    />
    <!-- 递归自己掉自己 -->
    <NodeWrapper v-if="process.childNode" :process.sync="process.childNode" :formlist="formlist" :node-id="nodeId" />
  </div>
</template>

<script>
import NodeAdd from "./NodeAdd";
import StartDrawer from "./drawers/StartDrawer";
import ApprovalDrawer from "./drawers/ApprovalDrawer";
import NotifierDrawer from "./drawers/NotifierDrawer";
import BlockDrawer from "./drawers/BlockDrawer";
export default {
  name: "NodeWrapper",
  components: {
    NodeAdd,
    StartDrawer,
    ApprovalDrawer,
    NotifierDrawer,
    BlockDrawer
  },
  inheritAttrs: false,
  props: {
    process: {
      type: Object,
      default: () => {}
    },
    formlist: {
      type: Array,
      default: () => []
    },
    nodeId: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      isInput: false,
      showStart: false, // 发起人抽屉
      showAppro: false, // 审批人抽屉
      showNotif: false, // 抄送人抽屉
      showBlock: false, // 条件抽屉
      startOptions: {}, // 发起人参数
      approOptions: {}, // 审批人参数
      notifOptions: {}, // 抄送人参数
      blockOptions: {} // 条件参数
    };
  },

  watch: {
    process(val) {
      this.initOptions();
    }
  },
  created() {
    this.initOptions();
  },

  methods: {
    changeName() {
      this.isInput = false;
    },
    addNodeId(i) {},
    onValueChange(data) {
      let options = null;
      switch (data.nodeType) {
        case "start":
          options = {
            id: data.id,
            name: data.name,
            nodeType: data.nodeType,
            flowId: data.flowId,
            limitUser: data.limitUser,
            limitDepartment: data.limitDepartment,
            props: data.props,
            formSetting: data.formSetting
          };
          break;
        case "approver":
          options = {
            id: data.id,
            name: data.name,
            nodeType: data.nodeType,
            flowId: data.flowId,
            flowGroupId: data.flowGroupId,
            flowBlockId: data.flowBlockId,
            activateType: data.activateType,
            isLastNode: data.isLastNode,
            noneActionerAction: data.noneActionerAction,
            parentNodeType: data.parentNodeType,
            parentNodeId: data.parentNodeId,
            props: data.props,
            formSetting: data.formSetting
          };
          break;
        case "notifier":
          options = {
            id: data.id,
            name: data.name,
            nodeType: data.nodeType,
            flowId: data.flowId,
            flowGroupId: data.flowGroupId,
            flowBlockId: data.flowBlockId,
            isUserChose: data.isUserChose,
            isLastNode: data.isLastNode,
            userIds: data.userIds,
            roles: data.roles,
            supervisor: data.supervisor,
            parentNodeType: data.parentNodeType,
            parentNodeId: data.parentNodeId,
            props: data.props,
            formSetting: data.formSetting
          };
          break;
        case "block":
          options = {
            id: data.id,
            name: data.name,
            nodeType: data.nodeType,
            flowId: data.flowId,
            flowGroupId: data.flowGroupId,
            flowBlockId: data.flowBlockId,
            isUserChose: data.isUserChose,
            isLastNode: data.isLastNode,
            userIds: data.userIds,
            roles: data.roles,
            supervisor: data.supervisor,
            parentNodeType: data.parentNodeType,
            parentNodeId: data.parentNodeId,
            props: data.props,
            formSetting: data.formSetting,
            conditionNodes: data.conditionNodes
          };
          break;
      }
      if (this.nodeType === "block") {
        if (data.nodeType === "condition") {
          this.process.conditionNodes.forEach(item => {
            if (item.priorityLevel === data.priorityLevel) {
              item = data;
            }
          });
        }
      } else {
        this.$emit("update:process", Object.assign(this.process, options));
      }
    },
    initOptions() {
      switch (this.process.nodeType) {
        case "start":
          this.startOptions = {
            id: this.process.id,
            name: this.process.name,
            nodeType: this.process.nodeType,
            flowId: this.process.flowId,
            limitUser: this.process.limitUser,
            limitDepartment: this.process.limitDepartment,
            props: this.process.props,
            formSetting: this.process.formSetting
          };
          break;
        case "approver":
          this.approOptions = {
            id: this.process.id,
            name: this.process.name,
            nodeType: this.process.nodeType,
            flowId: this.process.flowId,
            flowGroupId: this.process.flowGroupId,
            flowBlockId: this.process.flowBlockId,
            activateType: this.process.activateType,
            isLastNode: this.process.isLastNode,
            noneActionerAction: this.process.noneActionerAction,
            parentNodeType: this.process.parentNodeType,
            parentNodeId: this.process.parentNodeId,
            props: this.process.props,
            formSetting: this.process.formSetting
          };
          break;
        case "notifier":
          this.notifOptions = {
            id: this.process.id,
            name: this.process.name,
            nodeType: this.process.nodeType,
            flowId: this.process.flowId,
            flowGroupId: this.process.flowGroupId,
            flowBlockId: this.process.flowBlockId,
            isUserChose: this.process.isUserChose,
            isLastNode: this.process.isLastNode,
            userIds: this.process.userIds,
            roles: this.process.roles,
            supervisor: this.process.supervisor,
            parentNodeType: this.process.parentNodeType,
            parentNodeId: this.process.parentNodeId,
            props: this.process.props,
            formSetting: this.process.formSetting
          };
          break;
        case "block":
          this.blockOptions = {
            id: this.process.id,
            name: this.process.name,
            nodeType: this.process.nodeType,
            flowId: this.process.flowId,
            flowGroupId: this.process.flowGroupId,
            flowBlockId: this.process.flowBlockId,
            isUserChose: this.process.isUserChose,
            isLastNode: this.process.isLastNode,
            userIds: this.process.userIds,
            roles: this.process.roles,
            supervisor: this.process.supervisor,
            parentNodeType: this.process.parentNodeType,
            parentNodeId: this.process.parentNodeId,
            props: this.process.props,
            formSetting: this.process.formSetting,
            conditionNodes: this.process.conditionNodes
          };
      }
    },
    delNode() {
      // 删除节点
      this.$emit("update:process", this.process.childNode);
    },
    openConfigDrawer(param) {
      this.deep(param);
      switch (this.process.nodeType) {
        case "start":
          this.startOptions = param;
          this.showStart = true;
          break;
        case "approver":
          this.approOptions = param;
          this.showAppro = true;
          break;
        case "notifier":
          this.notifOptions = param;
          this.showNotif = true;
          break;
        case "block":
          this.blockOptions = param;
          this.showBlock = true;
          break;
      }
    },
    deep(data) {
      // 递归 权限管理
      if (data.formSetting && !data.formSetting.length && this.formlist) {
        this.formlist.map(v => {
          data.formSetting.push({
            formCode: v.code,
            flowFormName: v.label,
            sort: v.sort,
            type: data.nodeType === "start" ? "edit" : "read"
          });
        });
      }
    },
    addTerm() {
      // 添加条件节点
      const len = this.process.conditionNodes.length + 1;
      this.process.conditionNodes.push({
        name: `条件${len}`, // 节点名称
        operationName: `请选择条件`, // 条件节点解释
        operationCode: "", // 条件节点运算逻辑
        nodeType: "condition",
        priorityLevel: len,
        props: {
          conditions: []
        }
      });
      this.$emit("update:process", this.process);
    },
    delTerm(index) {
      // 删除条件节点
      this.process.conditionNodes.splice(index, 1);
      this.$emit("update:process", this.process);
      if (this.process.conditionNodes.length === 1) {
        /*
           if (this.process.childNode) {
             if (this.process.conditionNodes[0].childNode) {
               this.reData(this.process.conditionNodes[0].childNode, this.process.childNode)
             } else {
               this.process.conditionNodes[0].childNode = this.process.childNode
             }
           } */
        /* 条件为一个时把前面的数据保留出阿来 */
        this.$emit("update:process", this.process.conditionNodes[0].childNode);
        /* 条件为一个时条件里的数据全删除*/
        // this.$emit("change", this.process.childNode);
      }
    },
    reData(data, addData) {
      if (!data.childNode) {
        data.childNode = addData;
      } else {
        this.reData(data.childNode, addData);
      }
    },
    // 数组转字符串
    arrToStr(arr) {
      if (arr.length) {
        return arr
          .map(item => {
            return item.name;
          })
          .toString();
      }
    },
    /* 编辑title */
    editortitle() {
      this.isInput = true;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../styles/nodeWrapper.scss";
</style>
